Dans cette leçon, nous examinerons rapidement la création d'instances de fenêtre de navigateur sans flamme, Electron fournit une page
dédiée à ce concept, que j'ai liée dans les ressources de la leçon.
Désormais, par défaut, et certainement pour la majorité des cas d'utilisation, une fenêtre d'application contiendra les
éléments d'interface utilisateur native du système d'exploitation.
Sur Mac, par exemple, la barre supérieure et les boutons de contrôle de la fenêtre se ferment, réduisent et maximisent comme
Windows et Linux.
Mais dans certains cas, le contenu présenté dans une fenêtre d'application peut être mieux adapté pour ne pas avoir
ces éléments.
Un exemple parfait étant quelque chose comme l'interface du lecteur vidéo Quick Time, en gardant à l'esprit
que cela nécessitera des moyens alternatifs d'interagir avec la fenêtre.
Voyons l'exemple le plus basique dans le constructeur de la fenêtre principale définissant frame sur false.
Je vais à nouveau me débarrasser des outils de développement.
Sauver.
Et c'est exactement la même fenêtre ascendante qu'avant, mais cette fois-ci, sans aucun élément de fenêtre natif, comme je
l'ai mentionné, cependant, cela étant un mécontentement, nous n'avons plus aucun moyen d'interagir avec cette
fenêtre.
Par exemple, nous ne pouvons pas le faire glisser librement.
Ce n'était pas aussi évident qu'avant car le haut nous permettait de saisir et de déplacer toute la fenêtre.
Mais au lieu de cela, ce qui se passe lorsque je clique et glisse, c'est que je sélectionne le contenu HTML.
Pas un super look pour une application native.
Donc, pour résoudre ce problème, nous pouvons essentiellement spécifier exactement où nous voulons autoriser le glissement et la sélection
dans notre application vers notre code.
Et très commodément, nous pouvons y parvenir avec certains sélecteurs à succès.
Cela peut sembler un peu étrange au début, mais gardez à l'esprit que ce avec quoi nous
interagissons à l'intérieur d'une fenêtre de navigateur n'est rien d'autre que le contenu Web de cette fenêtre html.
Et son objectif principal est celui d'un style tel que HTML.
Le style, bien sûr, inclut le style comportemental tel que la sélection, etc. en indexé ou HTML.
Ensuite, je donnerai à l'élément body une balise de style.
Une balise de style dans la tête aurait fonctionné.
Définissant également la propriété de sélection de l'utilisateur du kit Web, ce préfixe du kit Web correspond à la manière dont vous le verrez écrit
dans la documentation, mais il n'est pas réellement nécessaire.
Cette balise a été normalisée et peut simplement être écrite comme sélection de l'utilisateur.
L'un ou l'autre fonctionnera bien qu'aucun, ce qui signifie que rien dans l'élément body ne peut être sélectionné.
Enregistrez et rechargez manuellement le contenu de la fenêtre du navigateur avec la commande ou essayez à nouveau de ne rien sélectionner.
Mais nous ne pouvons toujours pas faire glisser cette fenêtre sans flamme, ce que nous avions initialement prévu de faire.
Revenons donc au HTML indexé et maintenant pour faire de cet élément du corps entier une région Dragonball, a déclaré
Webcke it up region pour faire glisser cet élément étant une balise non standard.
Le préfixe du kit Web est donc nécessaire pour enregistrer cela et ne peut pas déclencher le rechargement.
Et maintenant, en gardant à l'esprit que notre élément corporel n'a pas 100% de hauteur, c'est autour du contenu
ici.
Alors cliquez sur glisser et l'application se déplace comme prévu.
Bien sûr, ce ne sera pas toujours aussi simple que de ne pas sélectionner tout ce qui se trouve dans la balise body.
Et Dragonball, certains des éléments de l'interface utilisateur devront encore se comporter normalement pour le démontrer.
Je vais ajouter quelques pauses.
Avec un nouvel élément d'entrée de type range, le nom d'un sélecteur de plage HTML5 peut également être une plage avec une valeur
minimale de zéro et un maximum de, disons, 10, enregistrez-le, rechargez le contenu de la fenêtre.
Et maintenant, lorsque j'essaye d'ajuster le curseur, la fenêtre traîne à la place.
C'est parce que cet élément a hérité du comportement de son parent, la balise body.
Ainsi, en fonction du contenu de votre application, vous devrez spécifier où l'utilisateur peut et ne peut
pas interagir, faire glisser, sélectionner, etc. ou corrigez ce curseur de plage.
Donnez-lui une étiquette de style.
Avec la même propriété causant des ennuis d'ici.
Mais au lieu de cela, réglez-le sur aucune traînée.
Et cette fois, cela fonctionne tout en étant capable de faire glisser le cadre, cette fenêtre sur l'élément du
corps, dans l'ensemble, une bien meilleure expérience avec une interface utilisateur plus native.
Ce sont les bases de la création d'un cadre dans cette fenêtre.
Mais encore une fois, assurez-vous de prendre note des avis de plate-forme dans la documentation car il existe
différentes options et styles pour ces fenêtres, en fonction du système d'exploitation de l'utilisateur.
Je vais en montrer un dernier exemple.
Disons qu'au lieu de masquer tous les éléments de l'interface utilisateur, nous voulons simplement masquer la barre de titre.
Nous pouvons définir le style total du boss sur Caché.
Je vais ajouter un peu de rembourrage en haut de la balise body car le contenu va maintenant pousser derrière les boutons de
la fenêtre.
Enregistrez les deux fichiers et leur même fenêtre sans flamme, mais nous avons ces boutons de fenêtre natifs flottant sur
le contenu.